<template>
  <div class="ClassicCase">
    <!-- 顶部页面标题栏 -->
    <!-- <div class="header">
        <div class="backIcon" @click="back">
          <img slot="icon" src="../../assets/transfer/backIcon.png" class="iconImage" />
        </div>
        <div class="theme">典型案例</div>
      </div>-->
    <!-- 搜索栏 -->
    <van-search class="searchBox" v-model="searchKey" placeholder="请输入搜索关键词" show-action shape="round" @search="onSearch">
      <div class="searchBut" slot="action" @click="onSearch">搜索</div>
    </van-search>
    <!-- 页面主体信息区域 -->
    <div class="outermostMargin">
      <!-- 热搜词 区域 -->
      <div class="hotword">
        <div class="title">
          <span class="text">热搜关键词</span>
        </div>
        <van-divider />
        <!-- 词标签按钮区域 -->
        <div class="listBox">
          <van-list :finished="true">
            <div class="rowBox">
              <van-button class="rowItem" v-for="(item, index) in hotWords" :key="index" @click="changeActive(index, item)" :type="butActive === index ? 'info' : 'default'">{{item}}</van-button>
            </div>
          </van-list>
        </div>
      </div>
      <!-- 正文区域 懒加载 -->
      <div class="spot">
        <!-- 懒加载 列表形式， item内复杂元素布局 -->
        <div class="listBox">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div v-for="(item, index) in list" :key="index" style="min-height: 100px;" @click="toDet(item)">
              <div class="titles">
                <span class="mainTitle">
                    <van-tag color="#fff7dc" text-color="#f3c736" size="large">指导案例</van-tag>
                    {{ item.title }}
                  </span>
                <span class="subheading">{{ item.createTime }}</span>
              </div>
              <div class="summary">
                <span>{{ item.content }}</span>
              </div>
              <van-divider />
            </div>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "ClassicCase",
    data() {
      return {
        searchKey: "",
        butActive: -1,
        // 热搜关键词 列表 ["","","",……]
        hotWords: [
          "离婚",
          "继承",
          "交通事故",
          "物业纠纷",
          "欠薪",
          "租房",
          "买房",
          "专利"
        ],
        // 平安看点新闻数据类型，[{},{},{}……]
        list: [],
        finished: false,
        loading: false,
        pageSize: 10,
        pageIndex: 1,
        totalCount: 0
      };
    },
    methods: {
      back() {
        this.clearSearchKey();
        this.$router.isBack = true; // 将返回状态置为触发态，以边路由监听触发返回动画
        this.$router.back(); // 路由向后退一步
      },
      toDet(msg) {
        this.$router.push({
          path: "/contradictionDet",
          query: {
            detData: msg
          }
        });
      },
      onSearch() {
        console.log(this.searchKey);
        this.requestPostClassicCase();
        this.butActive = -1;
      },
      changeActive(index, item) {
        this.butActive = index;
        this.searchKey = item;
        // this.onSearch();
      },
      onLoad() {
        // 异步更新数据
        setTimeout(() => {
          // 向平安看点list push数据
          this.loading = true;
          this.requestPostClassicCase();
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          if (this.list.length >= this.totalCount) {
            // 判断列表后台反馈数据总量=目前的数据量则结束
            this.finished = true;
          }
        }, 1000);
      },
      clearSearchKey() {
        this.searchKey = "";
        this.butActive = -1;
        this.msgTitle = "婚姻继承";
      },
      requestPostClassicCase() {
        this.post("/typical_events/loadInfo", {
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
            titleOrContent: this.searchKey
          })
          .then(res => {
            console.log("classicCase", res);
            if (res.list.length) {
              this.list = this.list.concat(res.list);
              this.totalCount = res.pageInfo.totalCount;
              this.pageIndex += 1;
            }
          })
          .catch(err => {});
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "~@/smobile.scss";
  .ClassicCase {
    .header {
      padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;
      position: absolute;
      width: $sm-img-per-max;
      height: 21px;
      background: $sm-bg-color;
      z-index: 2;
      display: flex;
      flex-direction: row nowrap;
      justify-content: flex-start;
      .backIcon {
        position: absolute;
        white-space: nowrap;
        height: $sm-icon-px-md;
        z-index: 4;
        .iconImage {
          height: $sm-icon-px-md;
          width: $sm-icon-px-md;
          transform: rotateY(180deg);
        }
      }
      .theme {
        position: absolute;
        font-weight: bold;
        width: $sm-img-per-max;
        text-align: center;
        white-space: nowrap;
        z-index: 3;
      }
    }
    .searchBox {
      padding: $sm-spaceing-block-sm $sm-spaceing-block-base $sm-spaceing-block-sm $sm-spaceing-block-base;
      position: absolute;
      width: $sm-img-per-max;
      z-index: 2;
      .searchBut {
        font-size: $sm-font-sizeVH-md;
        color: $sm-color-primary;
        font-weight: bold;
      }
    }
    .outermostMargin {
      background: $sm-bg-color-grey;
      color: $sm-text-color;
      font-size: $sm-font-size-lg;
      overflow: auto;
      height: calc(100vh - 60px);
      margin: 60px 0 0 0;
      .hotword {
        padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;
        background: $sm-bg-color;
        display: flex;
        flex-direction: column;
        .title {
          padding: 0 $sm-spaceing-block-base 0 $sm-spaceing-block-base;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
        .listBox {
          padding: 0 $sm-spaceing-block-base 0 $sm-spaceing-block-base;
          display: flex;
          flex-direction: column;
          .rowBox {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            width: $sm-img-per-max;
            .rowItem {
              margin: $sm-spacing-row-sm $sm-spacing-row-sm $sm-spacing-row-sm $sm-spacing-row-sm;
              padding: 0;
              width: $sm-img-per-xm;
              font-size: $sm-font-sizeVH-sm;
            }
          }
        }
      }
      .spot {
        padding: $sm-spaceing-block-sm $sm-spaceing-block-base $sm-spaceing-block-sm $sm-spaceing-block-base;
        margin: $sm-spacing-col-sm 0 $sm-spacing-col-sm 0;
        background: $sm-bg-color;
        display: flex;
        flex-direction: column;
        .listBox {
          display: flex;
          flex-direction: column;
          .titles {
            display: flex;
            flex-direction: column;
            margin: $sm-spacing-col-xl 0 0 0;
            .mainTitle {
              font-size: $sm-font-size-title;
              font-weight: bold;
              color: $sm-color-title;
            }
            .subheading {
              margin: $sm-spacing-col-base 0 0 0;
              color: $sm-text-color-grey;
              font-size: $sm-font-size-sm;
              &:before {
                content: "";
                margin-right: $sm-pseudo-width-sm;
                padding: 0 $sm-pseudo-width-sm 0 0;
                height: $sm-pseudo-height-lg;
                background-color: $sm-text-color-li;
                background-size: $sm-img-size-mini;
                border-radius: $sm-border-radius-md;
              }
            }
          }
          .summary {
            margin: $sm-spacing-col-lg 0 $sm-spacing-col-lg 0;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            color: $sm-color-title;
          }
        }
      }
    }
  }
</style>